<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/animate.js"></script>
    <script src="./js/index.js"></script>

    <script>
        window.onload = function () {

            // 找到box
            let ban = document.querySelector('.ban')

            ban.classList.add('show')
        }
    </script>
</head>

<body>
    <header>
        <div class="w top">
            <div class="logo">
                <a href="JavaScript:">
                    <h1>极果</h1>
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="JavaScript:">首页</a></li>
                    <li><a href="JavaScript:">酷玩</a></li>
                    <li><a href="JavaScript:">导购</a></li>
                    <li><a href="JavaScript:">使用</a></li>
                    <li><a href="JavaScript:">报告</a></li>
                </ul>

                <div class="zhuce">
                    <a href="JavaScript:">注册</a>
                </div>
                <div class="search">

                    <input class="search-input" type="text" list="history" placeholder="请输入搜索内容">
                    <i class="sear"></i>
                </div>

            </div>


        </div>
    </header>
    <!-- banner -->
    <div class="banner">
        <div class="ban w">
            <h2 class="title">幻响小贝HiFi2.1音箱</h2>
            <p class="label">
                <span>126人申请</span>
                <span>￥599</span>
                <span>20台</span>
            </p>
            <p class="time">申请时间剩余：6小时50分钟26秒</p>
            <a href="#" class="btn">立即申请</a>
        </div>
    </div>

    <!-- hot -->
    <div class="hot w">
        <h2>热门试用</h2>
        <div class="hot-bd">
            <div class="jiantou">
                <a href="JavaScript:" class="le next">
                    <img src="./images/prev.png" alt="">
                </a>
                <a href="JavaScript:" class="ri prev">
                    <img src="./images/next.png" alt="">
                </a>
            </div>
            <div class="hot-main ">
                <ul class="lunbo">
                    <li class="">
                        <a href="#" class="con">
                            <span class=" sf">首发</span>
                            <img src="images/hot1.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="red">2030</span>
                                <span class="red">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="current red">剩余时间2天</p>
                        </a>

                        <a href="#" class="con">
                            <span class="tiyan">体验式专享</span>
                            <img src="images/hot2.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="green">2030</span>
                                <span class="green">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="cogren green">剩余时间2天</p>
                        </a>


                        <a href="#" class="con">
                            <span class=" sf">首发</span>
                            <img src="images/hot3.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="red">2030</span>
                                <span class="red">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="current red">剩余时间2天</p>
                        </a>


                        <a href="#" class="con">
                            <span class=" sf">首发</span>
                            <img src="images/hot4.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="red">2030</span>
                                <span class="red">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="current red">剩余时间2天</p>
                        </a>

                    </li>

                    <!-- 2 -->
                    <li class="">
                        <a href="#" class="con">
                            <span class=" sf">首发</span>
                            <img src="images/hot5.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="red">2030</span>
                                <span class="red">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="current red">剩余时间2天</p>
                        </a>

                        <a href="#" class="con">
                            <span class="tiyan">体验式专享</span>
                            <img src="images/hot6.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="green">2030</span>
                                <span class="green">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="cogren green">剩余时间2天</p>
                        </a>


                        <a href="#" class="con">
                            <span class=" sf">首发</span>
                            <img src="images/hot7.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="red">2030</span>
                                <span class="red">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="current red">剩余时间2天</p>
                        </a>


                        <a href="#" class="con">
                            <span class=" sf">首发</span>
                            <img src="images/hot8.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="red">2030</span>
                                <span class="red">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="current red">剩余时间2天</p>
                        </a>

                    </li>

                    <!-- 3 -->
                    <li class="">
                        <a href="#" class="con">
                            <span class=" sf">首发</span>
                            <img src="images/hot9.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="red">2030</span>
                                <span class="red">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="current red">剩余时间2天</p>
                        </a>

                        <a href="#" class="con">
                            <span class=" sf">首发</span>
                            <img src="images/hot10.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="red">2030</span>
                                <span class="red">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="cogren red">剩余时间2天</p>
                        </a>


                        <a href="#" class="con">
                            <span class="tiyan">体验式专享</span>
                            <img src="images/hot11.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="green">2030</span>
                                <span class="green">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="current green">剩余时间2天</p>
                        </a>


                        <a href="#" class="con">
                            <span class=" sf">首发</span>
                            <img src="images/hot12.jpg" alt="" width="220px" height="135px">
                            <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                            <p class="label">
                                <span class="red">2030</span>
                                <span class="red">20台</span>
                            </p>
                            <p class="sq"><span class="red">1329</span>申请</p>
                            <p class="current red">剩余时间2天</p>
                        </a>

                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 报道精选 -->
    <div class="baodao">
        <span class="span">
            <img src="./images/back.png" alt="" class="back">
        </span>
        <div class="w">
            <div class="title clearfix">
                <h2>报道精选</h2>
                <img src="./images/readMore.png" alt="" class="chakan">
                <a href="JavaScript:">查看更多</a>
            </div>
            <ul class="spl ">
                <li>
                    <img src="./images/bg1.jpg" alt="">
                    <div class="tit">
                        <h4>空气净化器里面学问多得惊呆你，你选对了吗？</h4>
                        <div class="tip">
                            <span>● 苏苏</span>
                        </div>
                        <div class="dianzan">
                            <span><img src="./images/xin.png" alt=""> </span>
                            <span>3</span>
                            <span><img src="./images/zan.png" alt=""> </span>
                            <span>3</span>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="./images/bg2.jpg" alt="">
                    <div class="tit">
                        <h4>怎么骑都不会累的智能自行车：云马 C1试骑体验</h4>
                        <div class="tip">
                            <span>● 苏苏</span>
                        </div>
                        <div class="dianzan">
                            <span><img src="./images/xin.png" alt=""> </span>
                            <span>3</span>
                            <span><img src="./images/zan.png" alt=""> </span>
                            <span>3</span>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="./images/bg3.jpg" alt="">
                    <div class="tit">
                        <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                        <div class="tip">
                            <span>● 苏苏</span>
                        </div>
                        <div class="dianzan">
                            <span><img src="./images/xin.png" alt=""> </span>
                            <span>3</span>
                            <span><img src="./images/zan.png" alt=""> </span>
                            <span>3</span>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="./images/bg4.jpg" alt="">
                    <div class="tit">
                        <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                        <div class="tip">
                            <span>● 苏苏</span>
                        </div>
                        <div class="dianzan">
                            <span><img src="./images/xin.png" alt=""> </span>
                            <span>3</span>
                            <span><img src="./images/zan.png" alt=""> </span>
                            <span>3</span>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="./images/bg5.jpg" alt="">
                    <div class="tit">
                        <h4>空气净化器里面学问多得惊呆你，你选对了吗？</h4>
                        <div class="tip">
                            <span>● 苏苏</span>
                        </div>
                        <div class="dianzan">
                            <span><img src="./images/xin.png" alt=""> </span>
                            <span>3</span>
                            <span><img src="./images/zan.png" alt=""> </span>
                            <span>3</span>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="./images/bg6.jpg" alt="">
                    <div class="tit">
                        <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                        <div class="tip">
                            <span>● 苏苏</span>
                        </div>
                        <div class="dianzan">
                            <span><img src="./images/xin.png" alt=""> </span>
                            <span>3</span>
                            <span><img src="./images/zan.png" alt=""> </span>
                            <span>3</span>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="./images/bg7.jpg" alt="">
                    <div class="tit">
                        <h4>空气净化器里面学问多得惊呆你，你选对了吗？</h4>
                        <div class="tip">
                            <span>● 苏苏</span>
                        </div>
                        <div class="dianzan">
                            <span><img src="./images/xin.png" alt=""> </span>
                            <span>3</span>
                            <span><img src="./images/zan.png" alt=""> </span>
                            <span>3</span>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="./images/bg8.jpg" alt="">
                    <div class="tit">
                        <h4>空气净化器里面学问多得惊呆你，你选对了吗？</h4>
                        <div class="tip">
                            <span>● 苏苏</span>
                        </div>
                        <div class="dianzan">
                            <span><img src="./images/xin.png" alt=""> </span>
                            <span>3</span>
                            <span><img src="./images/zan.png" alt=""> </span>
                            <span>3</span>
                        </div>
                    </div>
                </li>

            </ul>

        </div>

    </div>

    <!-- 导购精选 -->
    <div class="daogou ">
        <div class="title w">
            <h2>导购精选</h2>
        </div>
        <ul class="spl w bei">
            <li>
                <img src="./images/bg1.jpg" alt="">
                <div class="tit">
                    <h4>空气净化器里面学问多得惊呆你，你选对了吗？</h4>

                    <div class="dianzan">
                        <span> <img src="./images/xin.png" alt="" class="xin"></span>
                        <span>0</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span class="zan">3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/bg2.jpg" alt="">
                <div class="tit">
                    <h4>怎么骑都不会累的智能自行车：云马 C1试骑体验</h4>

                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt="" class="xin"> </span>
                        <span>0</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/bg3.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>

                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/bg4.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>

                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>


    <div class="kuwan clearfix ">
        <div class="title w ">
            <h2>发现酷玩</h2>
        </div>
        <ul class="spl w clearfix foo">
            <li>
                <img src="./images/k1.jpg" alt="">
                <div class="tit">
                    <h4>空气净化器里面学问多得惊呆你，你选对了吗？</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/k2.jpg" alt="">
                <div class="tit">
                    <h4>怎么骑都不会累的智能自行车：云马 C1试骑体验</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/k3.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/k4.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/k1.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/k2.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/k3.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/k4.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>

            <li>
                <img src="./images/k1.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/k2.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/k3.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>
            <li>
                <img src="./images/k4.jpg" alt="">
                <div class="tit">
                    <h4>声音不是最优秀，但它形音完美的结合，足够打动人心</h4>
                    <span class="hong">￥ 1212</span>
                    <div class="dianzan">
                        <span><img src="./images/xin.png" alt=""> </span>
                        <span>3</span>
                        <span><img src="./images/zan.png" alt=""> </span>
                        <span>3</span>
                    </div>
                </div>
            </li>



        </ul>
        <div class="btn">
            <img src="./images/more.png" alt="" class="more">
            <a href="JavaScript:" class="dianji">点击加载更多</a>
        </div>
    </div>

    <div class="footer">
        <div class="w">
            <div class="fix">
                <dl><img src="images/code.png" width="160" height="160" /></dl>
                <dl>
                    <dt><img src="images/logoImg.jpg" /></dt>
                    <dd>全球酷玩试用导购平台<br>酷·新奇·好玩·品质</dd>
                    <dd>微信添加“JguoJguo” <br>获取我们的服务。</dd>
                </dl>
                <dl>
                    <dt>免费试用</dt>
                    <dd><a href="JavaScript:">试用流程</a></dd>
                    <dd><a href="JavaScript:">如何提高成功率</a></dd>
                </dl>
                <dl>
                    <dt>友情链接</dt>
                    <dd><a href="JavaScript:">智东西</a><a href="JavaScript:">WEIBUSI</a></dd>
                    <dd><a href="JavaScript:">搜狐IT</a><a href="JavaScript:">腾讯科技</a></dd>
                    <dd><a href="JavaScript:">搜狐数码</a><a href="JavaScript:">凤凰科技</a></dd>
                    <dd><a href="JavaScript:">凤凰数码</a><a href="JavaScript:">PConline</a></dd>
                    <dd><a href="JavaScript:">泡泡网</a><a href="JavaScript:">3W咖啡</a></dd>
                    <dd><a href="JavaScript:">ZUK社区</a><a href="JavaScript:">亿觅emie</a></dd>
                    <dd><a href="JavaScript:">极客公园</a><a href="JavaScript:">易迅易启玩</a></dd>
                    <dd><a href="JavaScript:">果库</a></dd>
                </dl>
                <dl>
                    <dt>购买攻略</dt>
                    <dd><a href="JavaScript:">美亚海淘教程</a></dd>
                    <dd><a href="JavaScript:">日亚海淘教程</a></dd>
                    <dd><a href="JavaScript:">海淘转运攻略</a></dd>
                    <dd><a href="JavaScript:">kickstarter 众筹购买攻略</a></dd>
                    <dd><a href="JavaScript:">indiegogo 众筹购买攻略</a></dd>
                </dl>
                <dl>
                    <dt>厂商合作</dt>
                    <dd><a href="JavaScript:">关于极果</a></dd>
                    <dd><a href="JavaScript:">联系我们</a></dd>
                    <dd><a href="JavaScript:">商务合作：BD@jiguo.com</a></dd>
                    <dd><a href="JavaScript:">CEO邮箱：CEO@jiguo.com</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <span id="backTop"></span>

</body>

</html>